import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';
import { actionStyle } from '../action/action.css';

export const popMenuStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	outline: 'none',
	userSelect: 'none',
});

globalStyle(`${popMenuStyle}>div`, {
	display: 'flex',
	alignItems: 'center',
	padding: '0.5em',
	cursor: 'default',
	outline: 'none',
});

globalStyle(`${popMenuStyle}>div:focus,${popMenuStyle}>div.active`, {
	backgroundColor: vars.color.activeFocus,
});

globalStyle(`${actionStyle} ${popMenuStyle}>div`, {
	padding: '1em 0.5em',
});

globalStyle(`${popMenuStyle}>div.line`, {
	display: 'block',
	padding: 0,
	margin: '0.2em 0',
	borderTop: `1px solid ${vars.color.border}`,
	backgroundColor: 'none',
});

globalStyle(`${popMenuStyle}>div.disabled`, {
	color: vars.color.disabledText,
});

globalStyle(`${popMenuStyle}>div>span.icon`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: '1em',
	margin: '0 0.5em',
});

globalStyle(`${popMenuStyle}>div>span.text`, {
	flex: 1,
});

globalStyle(`${popMenuStyle}>div>span.arrow`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: '1.3em',
	marginLeft: '0.7em',
	marginRight: '0em',
});

globalStyle(`${popMenuStyle}>div.disabled>span>svg`, {
	fill: vars.color.disabledText,
});
